<template>
  <view class="wrapper">
    <view class="u-skeleton">
      <view class="nav">
        <view
          class="nav_a"
          :class="cur == item.id ? 'active' : ''"
          v-for="item in orderList"
          :key="item.id"
          @click="cur = item.id"
          >{{ item.name }}</view
        >
      </view>
      <view class="content" v-if="cur === '0'">
        <view class="list">
          <view v-for="item in listOne" :key="item.id">
            <view class="digital">
              <view class="dig_a">
                <template v-if="item.is_send !== 0">
                  <text>快递公司:{{ item.prize.trip_company }}</text>
                  <br />
                  <text>运单编号:{{ item.prize.trip_number }}</text>
                </template>
              </view>
              <view class="dig_b">{{ item.is_send ? '已发货' : '待发货' }}</view>
            </view>
            <view class="commodity" @click="navigateTo(item)">
              <image :src="item.prize.logo" />
              <view class="com_a">
                <view class="gro">
                  <view class="inf_a"> {{ item.prize.title }} </view>
                  <view class="inf_b" />
                </view>
                <view class="inf_c">
                  <view class="price">{{ item.prize.market_price }}</view>
                  <view class="status">{{ item.is_send === 0 ? '发货审核中' : '' }}</view>
                </view>
              </view>
            </view>
            <view class="button">
              <view />
              <view>
                <!-- <view class="btn_a" @click="exchangeShow = true"> 取消订单 </view> -->
                <button
                  class="btn_b"
                  @click="showToast(item.prize.id)"
                  :style="{
                    background:
                      item.is_send === 1 ? '#ccc' : 'linear-gradient(270deg, #ff8361, #ff5525)',
                  }"
                  :disabled="item.is_send == 1"
                  >提醒发货</button
                >
              </view>
            </view>
          </view>
        </view>
        <Empty :top="'220px'" v-if="listOne.length == 0" />
      </view>
      <view class="content" v-if="cur === '1'">
        <view class="list">
          <view v-for="item in listTwo" :key="item.id">
            <view class="digital">
              <view class="dig_a">
                <template v-if="item.is_send !== 0">
                  <text>快递公司:{{ item.prize.trip_company }}</text>
                  <br />
                  <text>运单编号:{{ item.prize.trip_number }}</text>
                </template>
              </view>
              <view class="dig_b">{{ item.is_send ? '已发货' : '待发货' }}</view>
            </view>
            <view class="commodity" @click="navigateTo(item)">
              <image :src="item.prize.logo" />
              <view class="com_a">
                <view class="gro">
                  <view class="inf_a"> {{ item.prize.title }} </view>
                  <view class="inf_b" />
                </view>
                <view class="inf_c">
                  <view class="price">{{ item.prize.market_price }}</view>
                  <view class="status">{{ item.is_send === 0 ? '发货审核中' : '' }}</view>
                </view>
              </view>
            </view>
            <view class="button">
              <view />
              <view>
                <!-- <view class="btn_a" @click="exchangeShow = true"> 取消订单 </view> -->
                <button
                  class="btn_b"
                  @click="showToast(item.prize.id)"
                  :style="{
                    background:
                      item.is_send === 1 ? '#ccc' : 'linear-gradient(270deg, #ff8361, #ff5525)',
                  }"
                  :disabled="item.is_send == 1"
                  >提醒发货</button
                >
              </view>
            </view>
          </view>
        </view>
        <Empty :top="'220px'" v-if="listTwo.length == 0" />
      </view>
      <view class="content" v-if="cur === '2'">
        <view class="list">
          <view v-for="item in listThree" :key="item.id">
            <view class="digital">
              <view class="dig_a">
                <template v-if="item.is_send !== 0">
                  <text>快递公司:{{ item.prize.trip_company }}</text>
                  <br />
                  <text>运单编号:{{ item.prize.trip_number }}</text>
                </template>
              </view>
              <view class="dig_b">{{ item.is_send ? '已发货' : '待发货' }}</view>
            </view>
            <view class="commodity" @click="navigateTo(item)">
              <image :src="item.prize.logo" />
              <view class="com_a">
                <view class="gro">
                  <view class="inf_a"> {{ item.prize.title }} </view>
                  <view class="inf_b" />
                </view>
                <view class="inf_c">
                  <view class="price">{{ item.prize.market_price }}</view>
                  <view class="status">{{ item.is_send === 0 ? '发货审核中' : '' }}</view>
                </view>
              </view>
            </view>
            <view class="button">
              <view />
              <view>
                <!-- <view class="btn_a" @click="exchangeShow = true"> 取消订单 </view> -->
                <button
                  class="btn_b"
                  @click="showToast(item.prize.id)"
                  :style="{
                    background:
                      item.is_send === 1 ? '#ccc' : 'linear-gradient(270deg, #ff8361, #ff5525)',
                  }"
                  :disabled="item.is_send == 1"
                  >提醒发货</button
                >
              </view>
            </view>
          </view>
        </view>
        <Empty :top="'220px'" v-if="listThree.length == 0" />
      </view>
    </view>
    <u-popup :show="exchangeShow" mode="center">
      <view class="numbergoods_con">
        <view>可退款金额</view><view>0.00</view>
        <view class="clearfix">
          <view @click="exchangeShow = false">取消</view>
          <view>确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { watch, ref } from 'vue';
  import { getAllOrderApi, getWaitOrderApi, getReceiveOrderApi, orderNoticeApi } from '@/api/index';

  const cur = ref('0') as any;
  const exchangeShow = ref(false);
  const orderList = ref([
    { id: '0', name: '全部' },
    { id: '1', name: '待发货' },
    { id: '2', name: '待收货' },
  ]);
  const listOne = ref([]) as any;
  const listTwo = ref([]) as any;
  const listThree = ref([]) as any;
  function navigateTo(item) {
    const objSteing = JSON.stringify(item);
    uni.navigateTo({
      url: `/pages/orderData/index?item=${encodeURIComponent(objSteing)}`,
    });
  }
  function getAllOrder() {
    getAllOrderApi().then((res) => {
      listOne.value = res.list;
    });
  }
  function getWaitOrder() {
    getWaitOrderApi().then((res) => {
      listTwo.value = res.list;
    });
  }
  function getReceiveOrder() {
    getReceiveOrderApi().then((res) => {
      listThree.value = res.list;
    });
  }
  watch(cur, () => {
    const value = cur.value;
    if (value == 0) {
      getAllOrder();
    } else if (value == 1) {
      getWaitOrder();
    } else if (value == 2) {
      getReceiveOrder();
    }
  });

  onLoad((option) => {
    const showTab = option?.showTab;
    cur.value = showTab;
    if (showTab == 0) {
      getAllOrder();
    } else if (showTab == 1) {
      getWaitOrder();
    } else if (showTab == 2) {
      getReceiveOrder();
    }
  });
  function showToast(id) {
    orderNoticeApi({ order_id: id }).then(() => {
      uni.showToast({
        title: '提醒成功,已催促审核人员加急处理.请耐心等待',
        icon: 'none',
      });
    });
  }
</script>
<style lang="scss" scoped>
  .wrapper {
    min-height: 100%;
    overflow-y: auto;
    background-color: #f4f5f7;
    .u-skeleton {
      .nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        height: 50px;
        background: #fff;
        z-index: 99;
        .nav_a {
          position: relative;
          width: 20%;
          text-align: center;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #9d9d9d;
        }

        .active {
          color: #323232;
          font-weight: 600;
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 24px;
            height: 2px;
            background: linear-gradient(270deg, #ff8361, #ff5525);
          }
        }
      }
      .content {
        padding: 0 4% 0;
        .list {
          margin-top: 10px;
          padding: 0 10px;
          background: #fff;
          border-radius: 3px;
          view {
            .digital {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              .dig_a {
                text {
                  font-size: 13px;
                  color: #9d9d9d;
                }
              }
              .dig_b {
                font-size: 13px;
                color: #ff5b2c;
              }
            }
            .commodity {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 0;
              border-bottom: 1px solid #eee;
              image {
                border-radius: 3px;
                width: 91px;
                height: 91px;
              }
              .com_a {
                width: calc(100% - 101px);
                height: 91px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                .gro {
                  .inf_a {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #323232;
                  }
                  .inf_b {
                    margin-top: 7px;
                    font-size: 13px;
                    color: #9d9d9d;
                  }
                }
                .inf_c {
                  display: flex;
                  justify-content: space-between;
                  .price {
                    font-weight: 800;
                  }
                  .status {
                    color: #ff9a2b;
                  }
                }
              }
            }
            .button {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 57px;
              view {
                &:nth-of-type(1) {
                  font-size: 14px;
                }
                &:nth-of-type(2) {
                  display: flex;
                  .btn_a {
                    width: 89px;
                    height: 35px;
                    border: 1px solid #9d9d9d;
                    border-radius: 3px;
                    font-size: 13px;
                    color: #9d9d9d;
                    text-align: center;
                    line-height: 35px;
                  }
                  .btn_b {
                    margin-left: 10px;
                    display: block;
                    width: 91px;
                    height: 37px;
                    text-align: center;
                    line-height: 37px;
                    border-radius: 3px;
                    font-size: 13px;
                    color: #fff;
                    background: linear-gradient(270deg, #ff8361, #ff5525);
                  }
                }
              }
            }
          }
        }
      }
    }
    .numbergoods_con {
      width: 200px;
      background: #fff;
      border-radius: 10px;

      uni-view {
        text-align: center;
      }

      > uni-view:nth-of-type(1) {
        font-size: 12px;
        padding: 25px 0 5px;
      }

      > uni-view:nth-of-type(2) {
        font-size: 20px;
        font-weight: 800;
      }

      > uni-view:nth-of-type(3) {
        border-top: 1px solid #eee;
        margin-top: 25px;

        uni-view {
          float: left;
          width: 50%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          box-sizing: border-box;

          &:first-of-type {
            border-right: 1px solid #eee;
            color: #999;
          }
        }
      }
    }
  }
</style>
